<!DOCTYPE html>
<html>

<head>
  <style>
      body {
          font-family: 'Arial', sans-serif;
          background-color: #2c2c2c; /* Dark background */
          margin: 0;
          overflow: hidden; /* Hide scrollbars */
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          position: relative; /* Needed for absolute positioning of the container */
      }
      #particles-js {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: -1; /* Place it behind the form */
      }
      .container {
          max-width: 400px;
          width: 100%;
          padding: 20px;
          background-color: #ffffff;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          text-align: center;
          position: relative;
          z-index: 1;
      }
      h2 {
          color: #007BFF;
          margin-bottom: 20px;
      }
      form label {
          display: block;
          margin-bottom: 5px;
          font-weight: bold;
          color: #333;
      }
      form select {
          display: block;
          width: 100%;
          padding: 10px;
          margin-bottom: 20px;
          border: 1px solid #ccc;
          border-radius: 4px;
          font-size: 16px;
          color: #555;
      }
      form button, form input[type="submit"] {
          display: block;
          width: 100%;
          padding: 10px;
          background-color: #007BFF;
          color: white;
          border: none;
          border-radius: 4px;
          font-size: 16px;
          cursor: pointer;
          transition: background-color 0.3s;
      }
      form button:hover, form input[type="submit"]:hover {
          background-color: #0056b3;
      }
      #qrcodeContainer {
          margin-top: 20px;
      }



      /*特殊下划线按钮*/
      .hover-button {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            text-decoration: none;
            color: #333;
            border: none; /* 移除边框 */
            background: none; /* 确保没有背景 */
            transition: all 0.3s ease;
        }

        .hover-button::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background-color: #333;
            transition: width 0.3s ease;
        }

        .hover-button:hover {
            transform: translateY(-3px);
        }

        .hover-button:hover::after {
            width: 100%;
        }


        .hover-button_dao {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            text-decoration: none;
            color: #333;
            border: none; /* 移除边框 */
            background: none; /* 确保没有背景 */
            transition: all 0.3s ease;
        }

        .hover-button_dao::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background-color: white;
            transition: width 0.3s ease;
        }

        .hover-button_dao:hover {
            transform: translateY(-3px);
        }

        .hover-button_dao:hover::after {
            width: 100%;
        }

        /* 导航栏 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3%;
            background-color: #6c6666;
            color: white;
            padding: 15px;
            text-align: center;
            transition: transform 0.3s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            border-bottom-left-radius: 20px; /* 添加下方左边角的弧度 */
            border-bottom-right-radius: 20px; /* 添加下方右边角的弧度 */
            opacity: 0.7;

        }

        .navbar.hidden {
            transform: translateY(-100%);
        }

  </style>
</head>
<body>

  <div class="navbar" id="navbar">
    <div><p, style="
        font-size: 25px;
        position: absolute;
        top: 70%; /* 从顶部偏移50% */
        left: 50%; /* 从左边偏移50% */
        transform: translate(-50%, -50%); /* 使用变换来精确居中 */
        color: white;
        ">余额查询
        </p></div>
    <div>
      <a href="{{ url_for('index_page') }}" class="hover-button_dao" style="
          position: absolute;
          top:10%;
          left: 5%;
          color: white;            
          " >主页</a>
        <a href="{{ url_for('index_page') }}" class="hover-button_dao" style="
          position: absolute;
          top:10%;
          right: 5%;
          color: white;            
          " >关于我们</a>
        <a href="{{ url_for('add_cash') }}" class="hover-button_dao" style="
          position: absolute;
          top:10%;
          right: 15%;
          color: white;            
          " >充值服务</a>
    </div>
</div>

<div id="particles-js"></div>

<div class="container">
  <h2>账户余额</h2>
  <li>{{discribe}}</li>
</div>

<script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
<script>
  particlesJS("particles-js", {
    "particles": {
      "number": {
        "value": 80,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#ffffff" /* Bright particles */
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": "#000000"
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 1,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 3,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 40,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": true,
        "distance": 150,
        "color": "#ffffff", /* Bright lines */
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 6,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "repulse"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
          "opacity": 8,
          "speed": 3
        },
        "repulse": {
          "distance": 200,
          "duration": 0.4
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true
  });
</script>

</body>
</html>
